<template>
  <div class="userinfo">
    <navBar title="修改资料" @onClickLeft="onClickLeft" />
    <div class="user_img">
      <van-image
        round
        width="70px"
        height="70px"
        :src="photo"
        @click="openEditAvatar"
      />
    </div>
    <div class="user_form">
      <van-form>
        <span class="tip"><van-tag type="primary">昵称</van-tag></span>
        <van-field
          v-model="nickName"
          name="nickName"
          placeholder="请输入昵称"
        />
      </van-form>
    </div>
    <div class="btn_warp">
      <van-button type="info" class="btn" @click="sendBtn" v-no-more-click:3000
        >确定</van-button
      >
    </div>
    <editAvatar ref="editAvatar" />
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { Toast, Dialog } from "vant";
import { setMyInfo, editAddress, getMyInfo } from "@/api/user";
import { getMy } from "@u/index";
import editAvatar from "@cm/edit-avatar.vue";
export default {
  components: {
    navBar,
    editAvatar

  },
  data() {
    return {
      nickName: "",
      address: "",
      token: "",
      address_name: "",
      address_phone: "",
      address_postcode: "",
      isShow: false,
      photoPic: [],
      userInfo: {}
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    // 修改资料的确定按钮
    async sendBtn() {
      let params = {
        nickname: this.nickName,
        token: this.token
        // address_name: this.address_name,
        // address_phone: this.address_phone,
        // address: this.address,
        // address_postcode: this.address_postcode
      };
      // let Flag1 = false;
      // let Flag2 = false;
      if (this.nickName !== "") {
        const res = await setMyInfo(params);
        if (res.code == 200) {
          // Flag1 = true;
          Toast.success("修改资料成功！");
          await getMy(this);
          this.$router.push('/user/home')
        }
      }
      // if (
      //   this.address !== "" ||
      //   this.address_name !== "" ||
      //   this.address_phone !== "" ||
      //   this.address_postcode !== ""
      // ) {
      //   const res = await editAddress(params);
      //   if (res.code == 200) {
      //     Flag2 = true;
      //   }
      // }
      // switch ((Flag1, Flag2)) {
      //   case Flag1 == true && Flag2 == true:
      //     Toast.success("修改昵称和收件信息成功！");
      //     break;
      //   case Flag1 == true:
      //     Toast.success("修改昵称成功！");
      //     break;
      //   default:
      //     Toast.success("修改收件信息成功！");
      // }
    },

    cancel() {
      this.isShow = false;
      this.photoPic = [];
    },
    
    // async getUserInfo() {
    //   const res = await getMyInfo();
    //   if (res.code == 200) {
    //     this.nickName = res.data.nickname;
    //     // this.address_name = res.data.errand_info.address_name;
    //     // this.address_phone = res.data.errand_info.address_phone;
    //     // this.address = res.data.errand_info.address;
    //     // this.address_postcode = res.data.errand_info.address_postcode;
    //   }
    // },

    openEditAvatar() {
      this.$refs["editAvatar"].show();
    }
  },
  created() {
    this.token = window.sessionStorage.getItem("token");
    this.nickName = this.$store.state.user.nickname
    // this.getUserInfo();
  },
  computed: {
    photo() {
      return (
        
        this.$store.state.user.photo
      );
    }
  }
};
</script>

<style lang="less">
.userinfo {
  .user_img {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10%;
  }
  .user_form {
    display: flex;
    justify-content: center;
    margin-top: 10%;
    .van-cell {
      width: 325px;
      border-bottom: solid 1px #006cff;
    }
  }
  .btn_warp {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    .btn {
      width: 325px;
      height: 45px;
      background: #0016ff;
      border-radius: 22.5px;
    }
  }
  .van-uploader {
    display: flex;
    justify-content: center;
    margin-top: 3%;
  }
}
</style>
